<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="app">
			<h2>显示格式化时间</h2>
			当前时间：<h3>{{date}}</h3>
			<!--使用过滤器进行过滤-->
			格式化：<h3>{{date | dateString}}</h3>
			年月日：<h3>{{date | dateString("YYYY-MM-DD")}}</h3>
			时分秒：<h3>{{date | dateString("HH:mm:ss")}}</h3>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="../js/moment.js"></script>
	<script type="text/javascript">
		//自定义过滤器
//		Vue.filter("dateString",function(value,format){
//			//自定义时间的格式，如果format为空，则使用完整的格式（方式一）
//			return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
//		})

		//这里指定形参默认值，为空则使用默认（方式二）
		Vue.filter("dateString",function(value,format='YYYY-MM-DD HH:mm:ss'){
			//自定义时间的格式，如果format为空，则使用完整的格式
			return moment(value).format(format)
		})
		
		new Vue({
			el: "#app",
			data: {
				date: new Date()
			}
		})
		
	</script>

</html>
